<template>
	<view class="member">
		<!-- 导航 -->
		<!-- <u-navbar back-text="会员中心" :back-text-style="textStyle" back-icon-color="#000000"
			style="font-weight: bold;font-family: PingFang SC;"></u-navbar> -->
		<!-- end -->
		<view style="width:94%;margin: 0 auto;margin-top: 10rpx;">
			<!-- 头部开始 -->
			<view
				style="height: 300rpx; width: 100%;background-image: url(https://beedao.oss-cn-beijing.aliyuncs.com/7e513064c96945d98eee8941270405e2.png);    background-size: 100% 100%;background-repeat: no-repeat;">
				<view style="display: flex;justify-content: space-between;width: 90%;margin: 0 auto;padding:40rpx 0 ;">
					<view v-if="!userInfoVO.member">
						<view style="margin-top: 10rpx;">
							<view style="color: #FFFFFF;font-size: 36rpx;">开通会员享受专属权益</view>
						</view>
						<view style="color: #FFFFFF;margin-top: 18rpx;font-size: 27rpx;">
							尊享会员权益 充值送现金</view>
					</view>
					<view v-else>
						<view style="margin-top: 10rpx;">
							<view style="color: #FFFFFF;font-size: 36rpx;">尊贵的必到VIP会员</view>
						</view>
						<view style="color: #FFFFFF;margin-top: 18rpx;font-size: 27rpx;">
							您的会员将于{{userInfoVO.memberEnd}}到期</view>
					</view>
					<view style="display: flex;justify-content: center;align-items: center;">
						<view
							@click="goOpen"
							style="padding: 16rpx 20rpx;background: #ECE2BA;border-radius: 20rpx;color: #040404;font-weight: 400;">
							{{userInfoVO.member ?"立即续费":"立即开通"}}
						</view>
					</view>
				</view>
				<view style="display: flex;width: 92%;margin: 0 auto;justify-content: space-between;">
					<view style="display: flex;align-items: center;justify-content: center;">
						<view>
							<image style="width: 70rpx;height: 70rpx;border-radius: 50%;" :src="userInfoVO.portrait"></image>
						</view>
						<view style="color: #FFFFFF;margin-left: 14rpx;font-size: 26rpx;">
							<view >{{userInfoVO.nickname}}</view>						
							<!-- <view v-if="userInfoVO.member" style="font-size: 24rpx;">有效期至{{userInfoVO.memberEnd}}</view> -->
						</view>
					</view>
					<view style="display: flex;color: #ffffff;" v-if="userInfoVO.member" @click="goMeDetail">
						<view style="padding: 0 10rpx;">
							<view style="width: 114rpx;text-align: center;line-height: 40rpx;">{{userInfoVO.memberCouponsNum}}张</view>
							<view style="width: 114rpx;text-align: center;line-height: 50rpx;">红包</view>
						</view>
						<view style="display: flex; justify-content: center; align-items: center;">
							<view style="width: 1rpx;height: 50rpx;background-color: #ffffff;"></view>
						</view>
						<view style="width: 150rpx;">
							<view style="width: 100%;text-align: center;line-height: 40rpx;">{{userInfoVO.money?userInfoVO.money:0}}</view>
							<view style="width: 100%;text-align: center;line-height: 50rpx;">余额</view>
						</view>
					</view>
					
				</view>
			</view>
			<!-- 头部开始结束 -->
			<!-- 产品内容 -->
			<view style="width: 100%;display: flex;margin: 30rpx 0 20rpx 0;">
				<view
				:class="item.memberConfigId == selectId ? 'choose_1' : 'choose_2'"
				@click="selectProduct(item)"
				style="width: 30%;padding: 20rpx 10rpx;margin: 0 10rpx;border-radius: 10rpx;" v-for="(item,index) in product" :key="index">
					<view style="width: 100%;text-align: center;font-size: 30rpx;">{{item.dayNum}}{{userInfoVO.member?"天加油包":"天会员"}}</view>
					<view style="width: 100%;text-align: center;line-height: 60rpx;font-weight: bold;font-size: 32rpx;">{{item.price?item.price:0}}元</view>
					<view style="width: 100%;text-align: center;color: #EE0C00;font-size: 28rpx;">送{{item.presentMoney?item.presentMoney:0}}元</view>
				</view>
			</view>
			<!-- 产品内容结束 -->
			<!-- 会员专属权益 -->
			<view style="margin-bottom: 20rpx;">
				<view style="color: #4E4E4E;line-height: 60rpx;font-size: 34rpx;">会员专享权益</view>
				<view style="display: flex;flex-wrap: nowrap;margin-top: 15rpx;">
					<view style="width: 25%;" v-for="(ite,uid) in array" :key="uid">
						<view style="width: 100%;text-align: center;">
							<image style="width: 100rpx;height: 100rpx;" :src="ite.img" mode=""></image>
						</view>
						<view style="text-align: center;">{{ite.title}}</view>
						<view style="font-size: 20rpx;color: #8F8F8F;text-align: center;line-height: 50rpx;">{{ite.cont}}</view>
					</view>
				</view>
				
			</view>
			<!-- 会员专属权益结束 -->
			<!-- 会员详细规则 -->
			<view>
				<view style="color: #4E4E4E;line-height: 60rpx;font-size: 34rpx;">会员详细规则</view>
				<view style="margin-top: 15rpx;color: #4E4E4E;line-height: 60rpx;font-size: 28rpx;" v-html="detailRules">
					
				</view>
				
			</view>
			<!-- 会员详细规则结束 -->
			<!-- 续费或开通 -->
			<u-popup mode="bottom" v-model="showOpen">
				<scroll-view style="white-space: nowrap;display: flex;height: 500rpx;position: relative;" 
				lower-threshold="10" scroll-y="true" class="scroll-Y">
					<view style="width: 92%;margin: 0 auto; padding-top: 12rpx;display: flex;justify-content: space-between;" @click="showOpen = false">
						<view style="display: flex;padding:30rpx 0 ;">
							<view style="line-height: 30rpx;font-size: 30rpx;">{{userInfoVO.member == 1?"会员续费":"开通会员"}}</view>
							<image style="width: 60rpx;height: 30rpx;margin-left: 12rpx;"
								src="https://beedao.oss-cn-beijing.aliyuncs.com/9cd66885faab4b55af375ad7ad2211d7.png">
							</image>
						</view>
						<view style="display: flex; justify-content: center; align-items: center;">
							<image
								style="width: 36rpx;height: 36rpx;"
								src="https://beedao.oss-cn-beijing.aliyuncs.com/b7e475bcf2644c399e8897f9c788bc69.png"
								mode=""
							></image>
						</view>
						
					</view>
					<view style="width: 92%;display: flex;margin: 20rpx auto;">
						<view
						:class="items.memberConfigId == topUp ? 'choose_1' : 'choose_2'"
						@click="selectTopUp(items)"
						style="width: 30%;padding: 20rpx 10rpx;margin: 0 10rpx;border-radius: 10rpx;" v-for="(items,tid) in product" :key="tid">
							<view style="width: 100%;text-align: center;font-size: 30rpx;">{{items.dayNum}}{{userInfoVO.member == 1?"天加油包":"天会员"}}</view>
							<view style="width: 100%;text-align: center;line-height: 60rpx;font-weight: bold;font-size: 32rpx;">{{items.price?items.price:0}}元</view>
							<view style="width: 100%;text-align: center;color: #EE0C00;font-size: 28rpx;">送{{items.presentMoney?items.presentMoney:0}}元</view>
						</view>
					</view>
					<view style="width: 100%;position: absolute;bottom: 0;padding: 10rpx 0 15rpx 0;left: 0;" @click="isClick==false?goPay():''">
						<view style="font-size: 32rpx;width: 92%;background-color: #3A3D57;border-radius: 60rpx;margin: 0 auto;line-height: 90rpx;text-align: center;color:#FFFFFF ;">
							{{userInfoVO.member == 1?"立即续费":"立即开通"}}
						</view>
					</view>
				</scroll-view>
			</u-popup>
			<!-- 续费或开通结束 -->
			<!-- 立即续费或立即签约 -->
			<view style="width: 100%;height: 124rpx;"></view>
			<view style="width: 100%;position: fixed;bottom: 0;padding: 10rpx 0 15rpx 0;left: 0;" @click="goOpen">
				<view style="font-size: 32rpx;width: 92%;background-color: #3A3D57;border-radius: 60rpx;margin: 0 auto;line-height: 90rpx;text-align: center;color:#FFFFFF ;">
					{{userInfoVO.member?"立即续费":"立即开通"}}
				</view>
			</view>
			<!-- 立即续费或立即签约结束 -->
		</view>
		<u-mask :show="showt1" :duration="100">
			<view style="height:100vh;display: flex;justify-content: center;align-items: center;">
				<view  style="height: 70%; background-size: 100% 100%;background-repeat: no-repeat;width:70%;margin:0 auto;position: relative;background-image: url(https://beedao.oss-cn-beijing.aliyuncs.com/1551c9bc36e94af8aee474576ddbdca9.png);">
					<view style="font-size: 32rpx; width: 100%;text-align: center;line-height: 50rpx;margin-top: 20rpx;font-weight: bold;color: #ffffff;">您好，必到VIP用户</view>
					<view style="line-height: 60rpx;color: #ffffff;font-size: 26rpx;text-align: center;">已为您赠送了{{count?count:0}}张会员专属红包</view>
					<scroll-view style="white-space: nowrap;display: flex;height:73%;width: 80%;margin: 0 auto;padding-top: 10rpx;" scroll-y="true" class="scroll-Y" >
						<view v-for="(item,index) in allcoponList" :key="index" style="margin-bottom: 12rpx; position: relative; padding: 20rpx 0; width: 100%;height: 130rpx; background-size: 100% 100%;background-repeat: no-repeat;background-image: url(https://beedao.oss-cn-beijing.aliyuncs.com/151fe3c638d04d3895e31e28b7138f96.png);">
							<view style="position: absolute;top: -6rpx;left: -2rpx;">
								<image style="width: 100rpx;height: 100rpx;" src="https://beedao.oss-cn-beijing.aliyuncs.com/47d0273b39be4a229588643fc7d17d4b.png"></image>
							</view>
							<view style="color: #B18D6E;font-size: 26rpx;text-align: center;line-height: 44rpx;">
								{{item.businessName}}
								{{item.counponsType == 0 ? '满'+item.limitation+'减'+item.price : item.fmtDiscountStr}}
							</view>
							<view style="color: #676767;font-size: 22rpx;text-align: center;line-height: 44rpx;">有效期至{{item.endDatetime}}</view>
						</view>
					</scroll-view>
					<view @click="getAllCopon" style="display: flex;align-items: center;justify-content: center;margin-top: 6rpx;">
						<view style="text-align: center; font-size: 26rpx; width: 75%;height: 74rpx;line-height: 74rpx;border-radius: 60rpx;background: linear-gradient(148deg, #FCF5EF 0%, #FFE1C7 100%);color: #5B2A00;">领取会员专属红包</view>
					</view>
				</view>
			</view>
		</u-mask>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showt1:false,//会员优惠劵
				detailRules:"",
				isClick:false,//防止重复点击
				showOpen:false,
				product:[],
				selectId:'',//选中的产品
				topUp:'',
				array:[
					{img:"https://beedao.oss-cn-beijing.aliyuncs.com/e09dcc87f9ac4f4492f368ad065abf25.png",title:"超值充值",cont:"充值最高送￥300"},
					{img:"https://beedao.oss-cn-beijing.aliyuncs.com/510c95b55094479e9f85c7b58ebea1b9.png",title:"专属红包",cont:"定期专属红包发放"},
					{img:"https://beedao.oss-cn-beijing.aliyuncs.com/a10bf12dbbc94a06af1b3aedb9dccef7.png",title:"专属客服",cont:"专属客服线上服务"},
					{img:"https://beedao.oss-cn-beijing.aliyuncs.com/08df187d7ddc4420924e577b5032eaae.png",title:"急速售后",cont:"优先服务急速售后"},
				],
				userInfoVO:{},
				allcoponList:[],//所有的会员优惠劵
				count:0,
			};
		},
		onLoad() {
			var that = this;
			// 获取会员规则
			that.getDetailRules();
		},
		onShow() {
			var that = this;
			// 获取会员开通数组
			that.getMemberList();
			// 获取会员所有优惠劵
			that.getAllList();
			// 获取用户信息
			that.getUserInfo();
		},
		methods: {
			// 获取会员所有优惠劵
			getAllList(){
				var _this = this;
				let opts = {
					way: true, //true JSON请求；false 表单请求
					method: 'post',
					url: 'coupon/getMembershipCoupon'
				};
				let data = {}; 
				_this.http.httpTokenRequest(opts, data).then(res => {
					if (res.code == "200") {
						var arr=res.data.couponsList;
						arr.forEach((item,index)=>{
							item.endDatetime=item.endDatetime.substring(0, 10)
						});
						_this.allcoponList=arr;
						_this.count=res.data.couponsNum;
					}
				});
			},
			// 领取所有会员优惠券
			getAllCopon(){
				var _this = this;
				let opts = {
					way: true, //true JSON请求；false 表单请求
					method: 'post',
					url: 'coupon/receiveMembershipCoupon'
				};
				let data = {}; 
				_this.http.httpTokenRequest(opts, data).then(res => {
					if (res.code == "200") {	
						uni.showToast({
							title: "领取成功",
							mask: true,
							icon: 'none',
							duration: 2000
						});
						this.showt1=false;
						_this.getUserInfo();
					}
				});
				
			},
			// 打开开通或续费会员
			goOpen(){
				this.topUp=this.selectId;
				this.showOpen=true;
			},
			// 去余额明细
			goMeDetail(){
				uni.navigateTo({
					url:"./meDetail"
				})
			},
			// 选中产品
			selectProduct(item){
				this.selectId=item.memberConfigId;
			},
			// 充值选中
			selectTopUp(item){
				this.topUp=item.memberConfigId;
			},
			// 获取会员规则
			getDetailRules(){
				var _this = this;
				let opts = {
					way: true, //true JSON请求；false 表单请求
					method: 'post',
					url: 'member-order/rule'
				};
				let data = {}; 
				_this.http.httpTokenRequest(opts, data).then(res => {
					if (res.code == "200") {					
						_this.detailRules=res.data;
					}
				});
			},
			// 获取会员开通数组
			getMemberList(){
				var _this = this;
				let opts = {
					way: true, //true JSON请求；false 表单请求
					method: 'post',
					url: 'member-order/config'
				};
				let data = {}; 
				_this.http.httpTokenRequest(opts, data).then(res => {
					if (res.code == "200") {					
						_this.product=res.data
						_this.selectId=this.product[0].memberConfigId;
					}
				});
			},
			//支付
			goPay(){
				var _this=this
				_this.isClick=true;
				var isOpen=0;
				if(_this.userInfoVO.member == 1){
					isOpen=0;
				}else{
					isOpen=1;
				}
				let opts = {
					way: true, //true JSON请求；false 表单请求
					method: 'post',
					url: 'member-order/commit'
				};
				let data = {
					configId:_this.topUp
				};
				_this.http.httpTokenRequest(opts, data).then(res => {
					if (res.code == 200) {
						var needstr = res.data;
						_this.wxpay(needstr.vxPayData, needstr.orderId,isOpen);	
					} else {
						_this.isClick=false;
						uni.showToast({
							title: res.message,
							mask: true,
							icon: 'none',
							duration: 2000
						});
					}
				});
			},
			wxpay(str, orderId,isOpen) {
				let _this = this;
				let query = str;
				uni.requestPayment({
					provider: 'wxpay',
					appId: query.appId,
					timeStamp: query.timeStamp + '',
					nonceStr: query.nonceStr,
					package: query.package,
					signType: query.signType,
					paySign: query.sign,
					success: res => {
						uni.showToast({
							title: "支付成功",
							mask: true,
							icon: 'none',
							duration: 2000
						});
						_this.isClick=false;
						_this.showOpen = false;
						if(isOpen == 0){
							_this.getUserInfo();
						}else{
							_this.showt1=true;
						}
					},
					fail: val => {
						_this.isClick=false;
						_this.showOpen = false;
						uni.showToast({
							title: "支付失败",
							mask: true,
							icon: 'none',
							duration: 2000
						});
					}
				});
			},
			// 用户信息
			getUserInfo() {
				var _this = this;
				let opts = {
					way: true, //true JSON请求；false 表单请求
					method: 'post',
					url: 'user/info'
				};
				let data = {}; 
				_this.http.httpTokenRequest(opts, data).then(res => {
					if (res.code == "200") {						
						_this.userInfoVO = res.data.userInfoVO;
					}
				});
			},
		}
	};
</script>

<style scoped lang="scss">
.choose_1{
	border: 1rpx solid #FFAC58;
	background-color:#FFE0C1 ;
}
.choose_2{
	border: 1rpx solid #FFF3E7;
	background-color:#FFF3E7 ;
}
</style>
